<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  name: "scroll",
  props: {
    probeType: {
      default: 3,
    },
    pullUpLoad: {
      type: Boolean,
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      bScroll: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroll();
    });
  },
  methods: {
    initScroll() {
      if (!this.bScroll) {
        // 1.创建better-scroll实例
        this.bScroll = new BScroll(this.$refs.wrapper, {
          /**
           * 当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法
           * true:会影响keep-alive
          */
          observeDOM: false,
          /**
           * 0/1：都是不侦测实时的位置
           * 2：在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测
           * 3：只要是滚动都侦测
           */
          probeType: this.probeType, // 实时侦测滚动的位置
          click: true, // 配置允许点击事件
          // mouseWheel: true, // 是否鼠标滑轮滚动（默认false）
          pullUpLoad: this.pullUpLoad, // 配置上拉加载更多
          pullDownRefresh: {
            // 配置下拉
            threshold: 50, // 出发pullDown事件的位置
            stop: 0, // 下拉回弹后停留的位置
          },
        });
        // console.log(this.bScroll);
        // 2.监听实时滚动
        if (this.probeType === 2 || this.probeType === 3) {
          this.bScroll.on("scroll", (position) => {
            this.$emit("scrollY", Math.abs(position.y));
          });
        }
        // 3.上拉加载更多
        if (this.pullUpLoad) {
          this.bScroll.on("pullingUp", () => {
            // console.log("上拉加载更多");
            // 发送网络请求，请求更多页的数据
            this.$emit("pullingUp");
          });
        }
        // 4.监听下拉刷新
        this.bScroll.on("pullingDown", () => {
          console.log("下拉刷新");
        });
      } else {
        this.$nextTick(() => {
          // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
          this.bScroll.refresh();
        });
      }
    },
    // 回到顶部函数的封装
    scrollTo(x, y, time = 300) {
      /**
       * better-scroll提供的回到顶部的函数scrollTo(0,0,time好眠)
       */
      this.bScroll && this.bScroll.scrollTo(x, y, time);
    },
    finishPullUp() {
      /**
      // 等数据请求完成，并且将新的数据展示出来后;用bscorll 实例去调用 finnishPullUp() 函数。这样在可以多次使用上拉加载了。
      setTimeout(() => {
        this.bScroll.finishPullUp();
      }, 2000);
      */
      this.bScroll && this.bScroll.finishPullUp();
    },
    refresh() {
      // console.log("-------");
      this.$nextTick(() => {
        // 重新计算 better-scroll(高度)，当 DOM 结构发生变化的时确保滚动效果正常
        this.bScroll && this.bScroll.refresh();
      });
    },
  },
  // 监听详情页的数据加载后计算下高度
  watch: {
    data(val) {
      setTimeout(this.refresh, 20);
    },
  },
};
</script>
<style scoped>
.wrapper {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 50px;
  left: 0;
  /* height: calc(100% - 94px); */
  /* height: 500px; 注意高度自己决定 */
  /* margin-top: 44px; */
}
</style>
